import { Checkbox, DatePicker, Form, FormInstance, InputNumber, Select } from 'antd';
import { useQuery } from '@tanstack/react-query';
import EventCenterServices from '@/api/services/eventCenterServices.ts';
import { useCatch } from '@/hooks';
import Calendar from '@/pages/historyReplay/components/Calendar.tsx';
import { FC, useState } from 'react';
import dayjs from 'dayjs';

export type FormData = {
  plateNumber: string;
  startTime: dayjs.Dayjs;
  endTime: dayjs.Dayjs;
  space: number;
  duration: number;
  autoPlay: boolean;
};

type Props = {
  form: FormInstance<FormData>;
};

const SearchForm: FC<Props> = ({ form }) => {
  const catchFn = useCatch();

  const { data: deviceOptions } = useQuery({
    queryKey: ['deviceList'],
    queryFn: () => catchFn(() => EventCenterServices.getDeviceList()),
    select: ({ data }) => data.map((item) => ({ label: item.carNo, value: item.carNo })),
  });

  const spaceOptions = [
    { value: 0, label: '0M' },
    { value: 100, label: '100M' },
    { value: 1000, label: '1KM' },
  ];

  const [date, setDate] = useState(dayjs());

  const handleCalendarChange = (date: dayjs.Dayjs) => {
    setDate(date);
    form.setFieldValue('startTime', date.startOf('day'));
    form.setFieldValue('endTime', date.endOf('day'));
  };

  return (
    <div>
      <Form
        form={form}
        layout="vertical"
        initialValues={{
          startTime: date.startOf('day'),
          endTime: date.endOf('day'),
          space: 0,
          duration: 0,
          autoPlay: true,
        }}
      >
        <Form.Item
          name="plateNumber"
          className="mb-2"
          // rules={[{ required: true, message: '请选择车牌号' }]}
        >
          <Select
            placeholder="请选择车牌号"
            allowClear
            showSearch
            style={{ width: '100%' }}
            options={deviceOptions}
          />
        </Form.Item>
        <Form.Item>
          <Calendar currentDate={date} onDateSelect={handleCalendarChange} />
        </Form.Item>
        <Form.Item
          label="开始时间："
          name="startTime"
          // rules={[{ required: true, message: '请选择开始时间' }]}
        >
          <DatePicker
            showTime
            className="w-full"
            placeholder="请选择开始时间"
            allowClear={false}
            disabledDate={(current) => {
              return current.valueOf() > form.getFieldValue('endTime').valueOf();
            }}
          />
        </Form.Item>
        <Form.Item
          label="结束时间："
          name="endTime"
          dependencies={['startTime']}
          rules={[
            ({ getFieldValue }) => ({
              validator(_, value) {
                if (getFieldValue('startTime').valueOf() < value.valueOf()) {
                  return Promise.resolve();
                }
                return Promise.reject(new Error('结束时间不能小于开始时间'));
              },
            }),
          ]}
        >
          <DatePicker
            showTime
            className="w-full"
            placeholder="请选择结束时间"
            allowClear={false}
            disabledDate={(current) => {
              return current.valueOf() < form.getFieldValue('startTime').valueOf();
            }}
          />
        </Form.Item>

        <Form.Item
          label="轨迹点间距："
          name="space"
          // rules={[{ required: true, message: '请选择轨迹点间距' }]}
        >
          <Select className="w-full" placeholder="请选择轨迹点间距" options={spaceOptions} />
        </Form.Item>
        <Form.Item
          label="停车时长≥ (秒)："
          name="duration"
          // rules={[{ required: true, message: '请输入停车时长' }]}
        >
          <InputNumber className="w-full" placeholder="请输入停车时长" min={0} />
        </Form.Item>
        <Form.Item name="autoPlay" valuePropName="checked">
          <Checkbox defaultChecked={true}>自动播放</Checkbox>
        </Form.Item>
      </Form>
    </div>
  );
};

export default SearchForm;
